import './Scss/SafetyTraining.scss'
import { useState, useRef, useEffect } from 'react'
import { Http } from '../../../../Common/Api'
import { useSize, useRequest } from 'ahooks'
import { Column, DualAxes } from '@ant-design/plots'
import { WebTemplateUrl } from './configuration'

export const SafetyTraining001 = () => {
    const { run: getSecurityStatSecurityTrainingStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { passedPercent, trainingHours, trainingPersonCount, trainingPersonNum } = res
            setDataOne([
                {
                    uuid: '1',
                    icon: 'train001.png',
                    title: '培训人数',
                    value: trainingPersonNum,
                    unit: '人',
                    color: '#FFCB4F',
                },
                {
                    uuid: '2',
                    icon: 'train002.png',
                    title: '培训次数',
                    value: trainingPersonCount,
                    unit: '人/次',
                    color: '#48EDCF',
                },
                {
                    uuid: '3',
                    icon: 'train003.png',
                    title: '总时长',
                    value: trainingHours,
                    unit: 'H',
                    color: '#87CBFF',
                },
                {
                    uuid: '4',
                    icon: 'train004.png',
                    title: '培训合格率',
                    value: passedPercent,
                    unit: '%',
                    color: '#FF8E43',
                },
            ])
        },
    })
    const { run: getSecurityStatSecurityTrainingStatByPersonType } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res.length !== 0) {
                let data = []
                res.forEach(item => (data = [...data, { type: item.personTypeName, value: item.personNum }]))
                setDataTwo(data)
            }
        },
    })

    useEffect(() => {
        getSecurityStatSecurityTrainingStat({ url: `getSecurityStatSecurityTrainingStat` })
        getSecurityStatSecurityTrainingStatByPersonType({ url: `getSecurityStatSecurityTrainingStatByPersonType` })
    }, [getSecurityStatSecurityTrainingStat, getSecurityStatSecurityTrainingStatByPersonType])

    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [DataOne, setDataOne] = useState([
        { uuid: '1', icon: '科技培训.png', title: '培训人数', value: 0, unit: '人', color: '#FFCB4F' },
        { uuid: '2', icon: 'shujubaobiao.png', title: '培训次数', value: 0, unit: '人/次', color: '#48EDCF' },
        { uuid: '3', icon: 'shijianbeifen3.png', title: '培训人数', value: 0, unit: 'H', color: '#87CBFF' },
        { uuid: '4', icon: 'xiaoxi-chenggong.png', title: '培训合格率', value: 0, unit: '%', color: '#FF8E43' },
    ])

    const [DataTwo, setDataTwo] = useState([])

    const [ChartsTwo, setChartsTwo] = useState()

    const { run: getSecurityStatSecurityTrainingStatByMonth } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(({ trainingMonth, personCount, passedPercent }) => {
                data = [
                    ...data,
                    {
                        type: trainingMonth,
                        培训人次: personCount || 0,
                        培训合格率: passedPercent,
                    },
                ]
            })
            setDataThr(data)
        },
    })

    useEffect(() => {
        getSecurityStatSecurityTrainingStatByMonth({ url: `getSecurityStatSecurityTrainingStatByMonth` })
    }, [getSecurityStatSecurityTrainingStatByMonth])

    const [DataThr, setDataThr] = useState([])
    const [ChartsThr, setChartsThr] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const configTwo = {
                data: DataTwo,
                autoFit: false,
                width: width - 550,
                height: height / 2 - 50,
                appendPadding: 16,
                maxColumnWidth: 14,
                xField: 'type',
                yField: 'value',
                color: '#B3FCFE',
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#fff' } },
                    line: { style: { stroke: '#3AA8E2' } },
                    tickLine: { style: { stroke: '#3AA8E2' } },
                },
                yAxis: {
                    title: { text: '人', position: 'end', autoRotate: false, offset: -15, style: { fill: '#fff' } },
                    tickCount: 5,
                    label: { style: { fill: '#fff' } },
                    grid: { line: { style: { stroke: 'rgba(58, 168, 226, 0.2)' } } },
                },
            }
            setChartsTwo(configTwo)
            const config = {
                data: [DataThr, DataThr],
                color: ['#B3FCFE', '#FBED6B'],
                autoFit: false,
                width: width - 50,
                height: height / 2 - 50,
                appendPadding: 16,
                xField: 'type',
                yField: ['培训人次', '培训合格率'],
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    培训人次: {
                        title: {
                            text: '人次',
                            position: 'end',
                            autoRotate: false,
                            offset: 50,
                            style: { fill: '#B2FBFD' },
                        },
                        tickCount: 5,
                        label: { style: { fill: '#B2FBFD' } },
                        grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                    },
                    培训合格率: {
                        title: {
                            text: '合格率',
                            position: 'end',
                            autoRotate: false,
                            offset: 50,
                            style: { fill: '#B2FBFD' },
                        },
                        tickCount: 5,
                        label: { style: { fill: '#B2FBFD' } },
                        grid: null,
                    },
                },
                geometryOptions: [
                    {
                        geometry: 'column',
                        color: 'l(270) 0:rgba(179, 252, 254, 0.1)  1:rgba(179, 252, 254, 1)',
                        maxColumnWidth: 20,
                    },
                    {
                        geometry: 'line',
                        color: '#FBED6B',
                        point: {
                            size: 4,
                            shape: 'custom-point',
                            style: { fill: '#F3B060', stroke: '#CE5C39', lineWidth: 2 },
                        },
                    },
                ],
            }
            setChartsThr(config)
        }
    }, [DataThr, DataTwo, size])

    return (
        <div className="SafetyTraining001" ref={ChartsBox}>
            <div>
                <div className="Tables">
                    {DataOne.map(({ uuid, icon, title, value, unit, color }) => (
                        <div key={uuid}>
                            <div className="SafetyTraining001Back">
                                <img src={WebTemplateUrl + icon} alt="" />
                            </div>
                            <div className="SafetyTraining001Color">
                                <div>
                                    <div style={{ color }}>{value}</div>
                                    <div>{unit}</div>
                                </div>
                                <div>{title}</div>
                            </div>
                        </div>
                    ))}
                </div>
                <div className="Charts">
                    <div className="TitleSmall">
                        <div>按工种统计</div>
                        <div />
                    </div>
                    <div className="ChartsBox">{ChartsTwo && <Column {...ChartsTwo} />}</div>
                </div>
            </div>
            <div>
                <div className="TitleSmall">
                    <div>按时间段统计</div>
                    <div />
                </div>
                <div className="ChartsBox">{ChartsThr && <DualAxes {...ChartsThr} />}</div>
            </div>
        </div>
    )
}
